<template>
  <div class="orderInfo-box">
    <div class="header-box">
      <div class="logo">
        结算页
      </div>
      <div id="#sflex03" class="stepflex">
        <dl class="first done">
          <dt class="s-num">1</dt>
          <dd class="s-text">1.我的购物车<s /><b /></dd>
        </dl>
        <dl class="normal doing">
          <dt class="s-num">2</dt>
          <dd class="s-text">2.填写核对订单信息<s /><b /></dd>
        </dl>
        <dl class="normal last">
          <dt class="s-num">3</dt>
          <dd class="s-text">3.成功提交订单<s /><b /></dd>
        </dl>
      </div>
    </div>
    <div class="adress-container">
      <!-- <div class="tip">
        填写并核对订单信息
      </div> -->
      <div class="main-box">
        <div class="step-tit">
          <h3>收货人信息</h3>
          <div class="aderss-add" @click="addRessFn({ 'province': '' })">新增收货地址</div>
        </div>
        <div class="step-cont">
          <div class="adress-list-box">
            <ul>
              <div>
                <li v-for="(item,index) in adressList" :key="index" :class=" index > 2 &&( showHideText=='收起地址'?'':'hideli')" @click="avtiveAdressFn(index)">

                  <div v-if="index <=2" :class="'item-name '+( index == 0?'active-li':'' )">
                    {{ item.receiveUserName }}
                  </div>
                  <div v-if="index <=2" class="li-hover ">
                    <div class="adress-detail">
                      <span class="addr-info">{{ item.provinceName }}{{ item.cityName }}{{ item.address }}</span>
                      <span class="addr-tel">{{ item.receiveUserPhone }}</span>
                    </div>
                    <div class="op-btns">
                      <div class="setdefault-btn">设为默认地址</div>
                      <div class="edit-btn" @click="addRessFn(item)">编辑</div>
                      <div class="delet-btn" @click="deleteAderssFn(item)">删除</div>
                    </div>
                  </div>
                  <div v-if="index >2" :class="'item-name '+( index == 0?'active-li':'' ) ">
                    {{ item.receiveUserName }}
                  </div>
                  <div v-if="index >2" :class="'li-hover '">
                    <div class="adress-detail">
                      <span class="addr-info">{{ item.provinceName }}{{ item.cityName }}{{ item.address }}</span>
                      <span class="addr-tel">{{ item.receiveUserPhone }}</span>
                    </div>
                    <div class="op-btns">
                      <div class="setdefault-btn">设为默认地址</div>
                      <div class="edit-btn" @click="addRessFn(item)">编辑</div>
                      <div class="delet-btn" @click="deleteAderssFn(item)">删除</div>
                    </div>
                  </div>
                </li>
              </div>

            </ul>
          </div>
        </div>
        <div class="addr-switch" @click="showHideListFn()">
          {{ showHideText }}
        </div>
      </div>

    </div>
    <div class="hr" />
    <div class="pay-box">

      <h3>支付方式</h3>
      <div class="payment-list">
        <ul>
          <li>
            <div class="payment-item">
              在线支付
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="hr" />
    <div class="step-tit">
      <h3>送货清单</h3>
      <div class="extra-r">
        <span>价格说明</span>
        <span>返回修改购物车</span>
      </div>
    </div>
    <div class="dis-modes">
      <div class="mode-item mode-tab">
        <div class="mode-item-tit">
          <h4>配送方式 </h4>
        </div>
        <div class="mode-tab-nav">
          <ul>
            <li>京东快递</li>
          </ul>
        </div>
        <div class="mode-infor">
          配送时间：工作日、双休日与节假日均可送货
        </div>
      </div>
      <div class="goods-list">
        <div class="goods-tit">
          <h4>商家：京东自营</h4>
        </div>
        <div class="goods-items">
          <div class="goods-item">

            <div class="p-img">
              <a
                target="_blank"
                href="http://item.jd.com/100018583946.html?dist="
              ><img src="//img14.360buyimg.com/N4/jfs/t1/247579/37/4176/152245/65ba2fceFc64d6be2/2a4278c6dfd66fea.jpg" alt=""></a>
            </div>
            <div class="goods-msg">
              <div class="goods-msg-gel">
                <div class="p-name">

                  <a href="http://item.jd.com/100018583946.html?dist=" target="_blank">
                    小鹿蓝蓝_妙趣软心曲奇牛奶蔓越莓味 儿童零食美味夹心宝宝饼干 100g
                  </a>
                </div>

                <div class="p-price ">

                  <strong class="jd-price">
                    ￥ 29.90

                    <em class="" />
                  </strong>

                  <span class="p-num">
                    x1
                  </span>
                  <span id="pre-state" class="p-state">有货</span>
                  <div class="p-weight">0.120kg</div>

                </div>
              </div>
            </div>

            <div class="p-extra-continer">
              <div class="p-extra-line">
                <div class="fl-color"><strong>颜色：</strong><span>夹心曲奇 牛奶蔓越莓味</span></div>
              </div>
            </div>

            <div class="p-icon-continer">
              <i class="p-icon p-icon-w sevenicon" /><span class="ftx-07 withouthk seven">支持7天无理由退货（拆封后不支持）</span>

            </div>

            <div class="clr" />

          </div>
          <div class="goods-item">

            <div class="p-img">
              <a
                target="_blank"
                href="http://item.jd.com/100018583946.html?dist="
              ><img src="//img14.360buyimg.com/N4/jfs/t1/247579/37/4176/152245/65ba2fceFc64d6be2/2a4278c6dfd66fea.jpg" alt=""></a>
            </div>
            <div class="goods-msg">
              <div class="goods-msg-gel">
                <div class="p-name">

                  <a href="http://item.jd.com/100018583946.html?dist=" target="_blank">
                    小鹿蓝蓝_妙趣软心曲奇牛奶蔓越莓味 儿童零食美味夹心宝宝饼干 100g
                  </a>
                </div>

                <div class="p-price ">

                  <strong class="jd-price">
                    ￥ 29.90

                    <em class="" />
                  </strong>

                  <span class="p-num">
                    x1
                  </span>
                  <span id="pre-state" class="p-state">有货</span>
                  <div class="p-weight">0.120kg</div>

                </div>
              </div>
            </div>

            <div class="p-extra-continer">
              <div class="p-extra-line">
                <div class="fl-color"><strong>颜色：</strong><span>夹心曲奇 牛奶蔓越莓味</span></div>
              </div>
            </div>

            <div class="p-icon-continer">
              <i class="p-icon p-icon-w sevenicon" /><span class="ftx-07 withouthk seven">支持7天无理由退货（拆封后不支持）</span>

            </div>

          </div>
        </div>
      </div>
    </div>

    <!-- 金额 -->
    <div class="order-summary">

      <div class="statistic">
        <div class="list">
          <span>总商品金额：</span>
          <p class="price">￥380.80</p>
        </div>
        <div class="list">
          <span>运费：</span>
          <p class="price">￥380.80</p>
        </div>
      </div>
      <div class="clr" />
    </div>

    <div class="trade-foot">

      <div class="trade-foot-detail-com">
        <div class="fc-price-info">
          <span class="price-tit">应付总额：</span>
          <span id="sumPayPriceId" class="price-num">￥330.60</span>
        </div>

        <div class="fc-consignee-info">
          <span id="sendAddr" class="mr20" style="word-wrap: break-word">寄送至： 新疆 阿克苏地区 库车市 乌恰镇  第十四小学</span>
          <span id="sendMobile">收货人：何妹 177****6060</span>
        </div>
      </div>
      <div class="submit-btn">

        <div class="btn" @click="submitFn">
          提交订单
        </div>
      </div>
    </div>
    <AdressDialog ref="aderss" :active-data="activeData" />
    <el-dialog
      title="确定删除吗？"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
import AdressDialog from '@/components/adressDialog'
import _validate from '@/framework/commonJs/wptx_validate'
import { _userAddressPage, _userAddressDelete } from '@/api/order'
export default {
  name: 'GetOrderInfo',
  components: { AdressDialog },

  data() {
    return {
      showNum: '<=2',
      showTrue: true,
      showHideText: '展开地址',
      dialogVisible: false, // 删除地址弹框
      centerDialogVisible: false, // 地址弹框显示
      isActiveLi: 0, // 默认选中第一条地址
      adressList: [], // 地址列表
      activeData: {} // 这是需要传给子组件地址组件的值

    }
  },
  mounted() {
    this.getUserAddressPage()
  },
  methods: {
    // 初始化进入加载收货地址
    async getUserAddressPage() {
      const params = {
        pageNum: 1,
        pageSize: 10,
        tpType: 0,
        userId: 1

      }
      // const res = await _userAddressPage(params)
      const res = {
        'msg': '操作成功',
        'code': 200,
        'data': {
          'pageNum': 1,
          'pageSize': 10,
          'totalPage': 1,
          'total': 4,
          'records': [
            {
              'remark': null,
              'delFlag': '0',
              'createBy': null,
              'createTime': null,
              'updateBy': null,
              'updateTime': null,
              'id': '4',
              'userId': '1',
              'housingEstateId': '4757b77ddf9922705a7f46f865f5e8cd',
              'province': '61',
              'isDefault': '0',
              'city': '610100000000',
              'address': '小区内',
              'provinceName': '陕西省',
              'cityName': '西安市',
              'receiveUserName': '刘先生',
              'receiveUserPhone': '15098761524'
            },
            {
              'remark': null,
              'delFlag': '0',
              'createBy': null,
              'createTime': null,
              'updateBy': null,
              'updateTime': null,
              'id': '6',
              'userId': '1',
              'housingEstateId': '4757b77ddf9922705a7f46f865f5e8cd',
              'province': '61',
              'isDefault': '0',
              'city': '610100000000',
              'address': '我爱我家',
              'provinceName': '陕西省',
              'cityName': '西安市',
              'receiveUserName': '陈小宗',
              'receiveUserPhone': '18701362192'
            },
            {
              'remark': null,
              'delFlag': '0',
              'createBy': null,
              'createTime': null,
              'updateBy': null,
              'updateTime': null,
              'id': '7',
              'userId': '1',
              'housingEstateId': '4757b77ddf9922705a7f46f865f5e8cd',
              'province': '61',
              'isDefault': '0',
              'city': '610100000000',
              'address': 'dfdfd',
              'provinceName': '陕西省',
              'cityName': '西安市',
              'receiveUserName': '韩冲',
              'receiveUserPhone': '15596678786'
            },
            {
              'remark': null,
              'delFlag': '0',
              'createBy': null,
              'createTime': null,
              'updateBy': null,
              'updateTime': null,
              'id': '13',
              'userId': '1',
              'housingEstateId': 'efc799649871d6d1c0bf9933ad8ebc73',
              'province': '12',
              'isDefault': '0',
              'city': '120100000000',
              'address': 'uuu',
              'provinceName': '天津市',
              'cityName': '天津市',
              'receiveUserName': 'jmhjkm22222',
              'receiveUserPhone': 'tttt'
            }
          ],
          'rainbow': [
            1
          ]
        }
      }
      // console.log(res, 1111111)
      this.adressList = res.data.records
    },
    // 删除地址
    deleteAderssFn(item) {
      console.log(item)
      this.dialogVisible = true
    },
    async deleteFn() {
      console.log('删除数据入参')
      this.dialogVisible = false
      const params = {
        id: this.adressList[this.isActiveLi].id
      }
      console.log(params)
      const res = await _userAddressDelete(params)
      console.log(res)
      this.getUserAddressPage()
    },
    // 选择地址
    avtiveAdressFn(idx) {
      console.log(idx)

      this.adressList.unshift(...this.adressList.splice(idx, 1))
    },
    // 展开收起
    showHideListFn() {
      if (this.adressList.length > 3) {
        if (this.showHideText == '收起地址') {
          this.showHideText = '展开地址'
        } else {
          this.showHideText = '收起地址'
        }
      }
    },
    // 加载地址组件
    addRessFn(item) {
      this.activeData = item
      console.log('父组件', this.activeData)

      this.$nextTick(() => {
        this.$refs.aderss.initFn()
      })
    },
    // 提交
    submitFn() {
      this.$router.push({
        path: './orderPay'
      })
    }
  }

}
</script>
<style scoped lang="scss">
.orderInfo-box{

  font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
    width: 1200px;
    background: #fff;
    margin: 0 auto;
    .hideli{
          display: none !important;
        }
    .header-box{
        display: flex;
    padding: 20px 0 10px;
    justify-content: space-evenly;
    .logo {
    width: 276px;
    height: 50px;
    margin: 15px 0 22px;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    }
    .stepflex{
        border-top: 5px solid #ccc;
        text-align: center;
        margin: 30px 0 0;
        .s-num {
            position: relative;
            margin: -15px auto 0;
            color: #fff;
            font-weight: 700;
            width: 23px;
            height: 23px;
            background-image: url(//misc.360buyimg.com/user/purchase/2.0.0/css/i/step2013.png);
            line-height: 23px;
        }
        .s-text {
            color: #ccc;
        }
        .doing b, .stepflex .doing s, .first s, .stepflex .last b{
            position: relative;
            margin: -15px auto 0;
            color: #fff;
            font-weight: 700;
            width: 23px;
            height: 23px;
            background-image: url(//misc.360buyimg.com/user/purchase/2.0.0/css/i/step2013.png);
            line-height: 23px;
        }
        dl{
            float: left;
            position: relative;
            width: 160px;
            top: -5px;
            border-top: 5px solid #ccc;
            }
           dl.done {
            border-top-color: #caecb6;
         .s-num {
            background-position: -46px 0;
        }
        .s-text {
            color: #caecb6;
        }
        }
        .done {
            s {
            background-position: -46px -24px;
            background-color: #fff;
        }
        b{
            background-position: -51px -24px;
        }
        }
        dl.doing {
            border-top-color: #7abd54;
             .s-num {
            background-position: -23px 0;
        }
            .s-text {
            color: #7abd54;
            s {
                background-color: #caecb6;
                background-position: -23px -24px;
            }
            b{
                background-position: -28px -24px;
                background-color: #ccc;
            }
        }
        }
        .last{
           b {
            background-position: -5px -24px;
            background-color: #fff;
        }
        }
        }
    }

    .adress-container{
        .tip{
        height: 42px;
        line-height: 42px;
        font-size: 16px;
        font-family: "Microsoft YaHei";
        overflow: hidden;
        }
        .main-box{
            background-color: #fff;

            border: 1px solid #f0f0f0;
            .step-tit {
            line-height: 40px;
            height: 40px;
            color: #333;
            display: flex;
            justify-content: space-between;
            h3 {
                font-size: 14px;
                height: 40px;
                line-height: 40px;

            }
            .aderss-add:hover{
                color: #f30213;
                cursor: pointer;
            }
            .aderss-add{
                color: #005ea7;
                padding: 0 20px;
                margin-right: 10px;
            }
        }
        .step-cont{
            margin: 0 10px 0 20px;

        ul {

        li {
        list-style: none;
        height: 30px;
        margin: 6px 0px 6px 20px;

        display: flex;
        line-height: 30px;
        .li-hover:hover{
            background-color: #fff3f3;
        }
        .item-name{
        position: relative;
        border: 1px solid #ddd;
        line-height: 18px;
        padding: 5px 10px;
        width: 120px;
        text-align: center;
        cursor: pointer;
        background-color: #fff;
        }

        .active-li{

          border: 2px solid #e4393c;
        }
        .item-name:hover{
            border: 2px solid #e4393c;
        }
    }
        .li-hover {
            display: flex;
            margin-left: 37px;
        .adress-detail {
            width: 603px;
            height: 30px;
            line-height: 30px;
            span{
                display: inline-block;
                 margin-left: 10px;
            }

        }

        .op-btns {

            text-align: right;
            height: 30px;
            line-height: 30px;
            div{
                display: inline-block;
                margin-right: 10px;
            }
            div:hover{
                color: #f30213;
            }
        }
    }
    }
        }
        }
        .addr-switch {

            padding: 15px 20px 15px 19px;
            cursor: pointer;
        }
        }
     .hr{
        border-bottom: 1px solid #e6e6e6;
        height: 0;
        margin-bottom: 10px;
        }
        .pay-box{

        color: #333;
        h3 {
            font-size: 14px;
            height: 40px;
            line-height: 40px;
            padding: 0 20px 10px;

        }
        .payment-list {
            padding: 0 20px 10px;
            margin: 0 10px 10PX 20px;
            cursor: pointer;
            li{
                display: flex;
                .payment-item {
                border: 2px solid #e4393c;
                padding: 4px 23px;
                width: 120px;
        }
            }
        }

        }
        .step-tit {
        line-height: 40px;
        height: 40px;
        color: #333;
        display: flex;
        justify-content: space-between;
       h3 {
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        padding: 0 20px 10px;
        }
       .extra-r{

        margin-right: 28px;
        color: #005ea7;
        span{
            margin: 0  0  0 5px;
        }

        }

    }
    .dis-modes{
        display: flex;
        background: url(../../../assets/image/orderinfo-bg.png) 0 0 repeat-y;
        margin: 0 20px 0 20px;
    .mode-item {
        color: #666;
        width: 300px;
        padding: 10px 10px 10px 20px;
        margin-bottom: 50px;
        .mode-item-tit {
            height: 20px;
            line-height: 20px;
            padding: 2px 0;
        }
        .mode-tab-nav {
            margin: 10px 0 20px;
            ul{
                display: block;
                 width: 390px;
                 li{
                    border: 2px solid #e4393c;
                    padding: 4px 0;
                    width: 120px;
                    text-align: center;
                 }
            }
        }
    }
    .goods-list{
        width: 852px;
        padding: 10px 23px;
        .goods-tit {
          height: 24px;
          padding: 0 20px;
        h4 {
            color: #666;
        }
      }
      .goods-items {
        padding: 0 20px;
      .goods-item {
          border-bottom: 1px solid #fff;
          padding: 10px 0;
          margin-bottom: 10px;
          color: #666;
          .p-img {
          float: left;
          width: 80px;
          height: 80px;
          border: 1px solid #ddd;
          margin-right: 10px;
          background-color: #fff;
          img {
              width: 80px;
              height: 80px;
          }
        }
        .goods-msg {

        .goods-msg-gel {
          display: flex;
           justify-content: space-between;
          .p-name {

              width: 49.8%;
              height: 3em;
              line-height: 1.5em;
              overflow: hidden;
              margin-bottom: 10px;
            }
            .p-price {

            margin: 0 0 5px;
            span {
                display: inline-block;
                vertical-align: middle;
            }
            .jd-price {
            width: 100px;
            text-align: right;
            font-family: verdana;
              color: #e4393c;
           }
          .p-num {
              width: 70px;
              text-align: right;
          }
        .p-state {
            width: 58px;
            text-align: right;
        }

        }
          }
          }
          .p-extra-continer {
          width: 49.8%;
          display: inline-block;
          .p-extra-line {
            max-width: 240px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            .fl-color {
              min-width: 120px;
              max-width: 120px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
         }
          }
          .p-icon-continer {
              padding-left: 92px;
              margin-top: 5px;
              .ftx-07{
              color: #6679b3;
             }
          }
      }
      }
    }

    }

    .order-summary{
      display: flex;
    justify-content: flex-end;
      .statistic{
        width: 300px;
        margin: 20px 26px 10px 0;
        .list{
          height: 24px;
          line-height: 24px;
          overflow: hidden;
          margin-bottom: 5px;
          zoom: 1;
          span{
            width: 180px;
            margin-right: 20px;
            float: left;
            text-align: right;
          }
          p{
            color: #333;
            float: left;
            width: 100px;
            text-align: right;
            font-family: verdana;
          }
        }
      }

    }
    .trade-foot{
      font-family: "Microsoft YaHei",SimSun,verdana;
      .trade-foot-detail-com {
        padding: 15px 10px 15px 0;
        line-height: 20px;
        text-align: right;
        border-top: 1px solid #e6e6e6;
        margin: 0 20px;
        color: #999;
        background-color: #f4f4f4;
        .presale-price-info {
            margin-right: 10px;
            line-height: 25px;
            .price-tit{
              color: #666;
            }
        .price-num {
            color: #e4393c;
            font-family: Verdana;
            font-weight: 700;
            font-size: 18px;
            min-width: 122px;
            _width: 122px;
            float: right;
            *float: none;
            text-align: right;
        }

        }
        .fc-consignee-info{
        margin-right: 10px;
        line-height: 25px;
        .mr20 {
            margin-right: 20px;
        }
      }
    }
    .submit-btn{

        height: 50px;
        display: flex;
        justify-content: end;
        text-align: center;
        line-height: 50px;
        .btn{
        width: 135px;
        height: 36px;
        line-height: 36px;
        margin: 8px 20px 0 0;
        padding: 0;
        background-color: #e00;
        overflow: hidden;
        color: #fff;
        font-weight: 700;
        font-size: 16px;
        font-family: arial,"Microsoft YaHei";
        display: inline-block;
        border-radius: 3px;
        cursor: pointer;
        border: 0;
        }
    }
    }
    }

</style>
